(function($) {
    var initLayout = function() {
        var hash = window.location.hash.replace('#', '');
        var currentTab = $('ul.navigationTabs a')
            .bind('click', showTab)
            .filter('a[rel=' + hash + ']');
        if (currentTab.size() == 0) {
            currentTab = $('ul.navigationTabs a:first');
        }
        showTab.apply(currentTab.get(0));
        $('#colorpickerHolder').ColorPicker({ flat: true });
        $('#colorpickerHolder2').ColorPicker({
            flat: true,
            color: '#00ff00',
            onSubmit: function(hsb, hex, rgb) {
                $('#colorSelector2 div').css('backgroundColor', '#' + hex);
            }
        });
        $('#colorpickerHolder2>div').css('position', 'absolute');
        var widt = false;
        $('#colorSelector2').bind('click', function() {
            $('#colorpickerHolder2').stop().animate({ height: widt ? 0 : 173 }, 500);
            widt = !widt;
        });
        $('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
                onSubmit: function(hsb, hex, rgb, el) {
                    $(el).val(hex);
                    $(el).ColorPickerHide();
                },
                onBeforeShow: function() {
                    $(this).ColorPickerSetColor(this.value);
                }
            })
            .bind('keyup', function() {
                $(this).ColorPickerSetColor(this.value);
            });
        $('#colorSelector').ColorPicker({
            color: '#0000ff',
            onShow: function(colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function(hsb, hex, rgb) {
                $('#colorSelector div').css('backgroundColor', '#' + hex);
            }
        });
    };

    var showTab = function(e) {
        var tabIndex = $('ul.navigationTabs a')
            .removeClass('active')
            .index(this);
        $(this)
            .addClass('active')
            .blur();
        $('div.tab')
            .hide()
            .eq(tabIndex)
            .show();
    };

    EYE.register(initLayout, 'init');
})(jQuery)